<!DOCTYPE html>

<link rel="stylesheet" href="../styles.css" />

<style>
  #clip {
    border-width: 10px;
    overflow: scroll;
    direction: rtl;
  }

  #reference {
    position: relative;
    top: 115px;
  }

  #floating {
    width: 300px;
  }
</style>

<div id="clip">
  <div id="reference">Ref</div>
  <div id="floating">Float</div>
</div>

<script type="module">
  import {computePosition, shift} from '../dist/index.mjs';
  import {position, addEventListeners} from '../utils.mjs';

  addEventListeners(() => {
    computePosition(reference, floating, {
      placement: 'left',
      middleware: [shift({crossAxis: true})],
    }).then(position);
  });
</script>
